<!DOCTYPE >
<html>
    <head>
        <title>表单标签</title>
        <meta charset="UTF-8">
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
    </head>
    <body>
        <div class='title'>form标签 创建表单 用于收集信息 </div>
        <pre>&lt;form action='form.html' method='get'&gt;&lt;/form&gt;</pre>
        属性：
        <ol>
            <li>action 当提交表单时向何处发送表单数据</li>
            <li>
                method 表单提交的方式<br/>
                属性值
                <ol>
                    <li>get  默认值，效率高于post</li>
                    <li>post （更注重于私密性）</li>
                </ol>
            </li>
        </ol>
        <hr/>
    <div class='title'>数据框</div>
     <form>
    <ol>
        <li>
            input<pre>&lt;input type='text' name='fname' /&gt;请使用 label 元素为某个表单控件定义标签</pre>
            <p>type</p>
              <ol><li>   password密码框
                   <pre>&lt;label&gt;&lt;input type='password' value= '' name = 'pss' /&gt;&lt;/label&gt;</pre>
                  <label><input type='password' name='pss' value=''></label></li>

                 <li> file文件选择
                   <pre>&lt;label&gt;&lt;input type='file'name='img'  value='' /&gt;&lt;/label&gt;</pre>
                   <label><input type='file' name='img' value=''></label></li>


                  <li> text文本框
                   <pre>&lt;label&gt;&lt;input type='text' value= '文本框' name = 'name' /&gt;&lt;/label&gt;</pre>
                   <label><input type='text' value= '文本框' name = 'name' /></label></li>

                  <li> checkbox复选框
                   <pre>&lt;label&gt;&lt;input type='checkbox' value= '' name = 'sport' /&gt;&lt;/label&gt;
                       &lt;label&gt;&lt;input type='checkbox' value= '文本框' name = 'name' /&gt;&lt;/label&gt;
                       &lt;label&gt;&lt;input type='checkbox' value= '文本框' name = 'name' /&gt;&lt;/label&gt; </pre>

                   <label><input type='checkbox' name = 'sport' value=''> 运动</label>
                       <label><input type='checkbox' name='read' value=''> 阅读</label>
                       <label><input type='checkbox' name='music' value=''> 音乐</label></li>

               <li> redio单选框
                <pre>
                    &lt;label&gt;
                    &lt;input type='redio' id ='man' name = 'sex' /&gt;男&lt;/label&gt;
                &lt;label&gt;&lt;input type='redio' id ='woman' name = 'sex' /&gt;女
                    &lt;/label&gt;
                </pre>
                    <label > <input type='radio' name='sex' id='man'/>男</label>
                    <br />
                   <label ><input type='radio' name='sex' id='woman' />女</label>
               </li>
                  <li> hidden 隐藏域
                      <pre> &lt;input type='hidden' name='hid' value='学生'/&gt;</pre>
                      <input type='hidden' name='hid' value='学生'/></li>
                  <li> submit 提交
                      <pre> &lt;input  name= 'submit' type = 'submit' value = '提交'/&gt;</pre>
                      <input  name= 'submit' type = 'submit' value = '提交'/></li>
                  <li> reset重置
                      <pre> &lt;input type = 'reset' value = '重置'/&gt;</pre>
                      <input type = 'reset' value = '重置'/></li></ol>



        </li>
        <li>textarea 富文本域 <pre>&lt;label&gt;&lt;textarea name='introduce'&gt;&lt;/textarea&gt;&lt;/label&gt;
            </pre>
            <label><textarea name='introduce'></textarea></label>
        </li>
        <li>
            select下拉选择框option选项标签
            <pre>&lt;label&gt;&lt;select name = 'sex' /&gt;
                     &lt;option value='man'&gt;男&lt;/option&gt;
                &lt;option value= 'woman'&gt;女&lt;/option&gt;</pre>

            <label><select  name = 'sex' >
                <option value='man'>男</option>
                <option value= 'woman'>女</option>
            </select></label>
        </li>
    </ol>
         <hr/>
         <div class='title'>按钮的用法</div>
         <pre>
            自动提交
         1.&lt;input type = 'submit' value = '提交' /&gt;
         2.&lt;button&gt;提交&lt;/button&gt;
         3.&lt;input type = 'image' src = '../img/enroll.jpg'/&gt;(图片形式)
             非自动提交
         1.&lt;button type = 'button'>注册&lt;/button&gt;
         2.&lt;input type = 'button' value = '注册'/&gt;</pre>
         1.<input  name= 'submit' type = 'submit' value = '提交1' />
         2.<button>提交2</button>
         3.<input  name = 'img' type = 'image' src = '../img/enroll.jpg'/>(图片形式)
         <!--非自动提交 -->
         4.<button type = 'button'>注册4</button>
         5.<input type = 'button' value = '注册'/>
     </form>
        <hr/>
       <ul>说明
           <li>name       定义 input 元素的名称</li>
           <li>maxlength  输入字段中的字符的最大长度。</li>
           <li>size       定义输入字段的宽度</li>
           <li>value      内容</li>
           <li>width      定义 input 字段的宽度。（适用于 type="image"）</li>
           <li>src        定义以提交按钮形式显示的图像的 URL。</li>
           <li>readonly   只读</li>
           <li>disabled   禁用（disable= 'disable'）</li></ul>
    </body>
</html>